<template>
  <div>
    <div v-if="activeTab != 3" class="warn-box">
      <svg-icon style="margin-right:17px" icon-class="warn" :size="20" />
      <p> 请确保提交的商品符合国家法律法规，不得包含违禁商品。平台将随时进行抽审，一经发现，将对商品和店铺进行处理，严重将追究法律责任。</p>
    </div>
    <div class="common_form_search">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="商品名称">
          <el-input v-model="searchForm.goods_name" placeholder="请输入商品名称" clearable />
        </el-form-item>
        <template v-if="activeTab != 3">
          <el-form-item label="商品品类">
            <el-select v-model="searchForm.cate_id" placeholder="请选择商品品类" clearable>
              <el-option v-for="item in categoryList" :key="item.category_id" :label="item.name" :value="item.category_id" />
            </el-select>
          </el-form-item>
          <el-form-item label="租赁方式">
            <el-select v-model="searchForm.rent_type" placeholder="请选择" clearable>
              <el-option label="随租随还" :value="3" />
              <el-option label="租完归还/续租/买断" :value="1" />
              <el-option label="租完即送" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <my-date-picker ref="myDatePicker" />
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="审核类型">
            <el-select v-model="searchForm.check_type" placeholder="全部" clearable>
              <el-option label="商品审核" :value="1" />
              <el-option label="下架审核" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="审核状态">
            <el-select v-model="searchForm.check_status" placeholder="全部" clearable>
              <el-option label="未审核" :value="1" />
              <el-option label="审核未通过" :value="2" />
            </el-select>
          </el-form-item>
        </template>
        <el-form-item>
          <el-button size="small" type="primary" @click="search()">查询</el-button>
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider />
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
      </h5>
      <el-button v-if="$hasMethod('#add') && activeTab != 3" size="small" class="add-btn" icon="el-icon-plus" @click="$router.push({ name: 'goodsAdd' })">发布商品</el-button>
    </div>
    <el-table v-show="tableData.length > -1" :data="tableData" border>
      <el-table-column align="center" label="商品信息" width="300">
        <template slot-scope="scope">
          <div class="flex align-center goods_info">
            <!-- <el-image style="width: 60px; height: 60px"
            :src="scope.row.imgurl ? $globalObj.imgBaseUrl + scope.row.imgurl : ''">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image> -->
            <el-popover placement="right" trigger="hover">
              <img style="width: 100px; height: 100px" :src="scope.row.imgurl ? $globalObj.imgBaseUrl + scope.row.imgurl : ''">
              <img slot="reference" style="width: 60px; height: 60px;" :src="scope.row.imgurl ? $globalObj.imgBaseUrl + scope.row.imgurl : ''">
            </el-popover>
            <div class="flex-1 text-left info">
              <p class="activity">{{ scope.row.id }}
                <span v-for="(item, index) in scope.row.activity" :key="index" class="inline-block vertical-middle">
                  <el-popover placement="top-start" width="160" trigger="hover" content="商城商品推荐">
                    <img v-if="item.activity_img" slot="reference" class="w-100 h-100" :src="$globalObj.imgApiUrl + item.activity_img" :alt="item.activity_title">
                  </el-popover>
                  <!-- <img
                    v-if="item.activity_img"
                    class="w-100 h-100"
                    :src="$globalObj.imgBaseUrl+item.activity_img"
                    :alt="item.activity_title"
                  > -->
                </span>
              </p>
              <p>{{ scope.row.title }}</p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" width="100" prop="pact_type" label="租赁方式" />
      <el-table-column align="center" width="120" label="库存">
        <template slot-scope="scope">
          <p>
            <el-popover v-if="activeTab != 3" placement="top-start" width="160" trigger="hover" content="商品套餐库存不足">
              <span v-if="scope.row.is_lack" slot="reference" style="margin-right:5px" class="vertical-middle">
                <i class="el-icon-warning warning-font" style="font-size:18px" />
              </span>
            </el-popover>
            {{ scope.row.stock }}
          </p>
          <el-button v-if="$hasMethod('#editStock') && activeTab != 3" type="text" style="padding: 0;" @click="editStock(scope.row.id)">修改库存</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="cate_name" label="品类" />
      <el-table-column align="center" prop="create_time" label="创建时间" width="170" />
      <el-table-column v-if="activeTab != 3" align="center" prop="status" width="200">
        <template slot="header">
          <span v-if="activeTab == 1">状态</span>
          <el-popover v-else placement="top" width="250" trigger="hover">
            <div class="color-666">
              <p style="font-size:12px"><span class="color-333 bold-font">商家下架：</span>商家手动下架商品状态。</p>
              <p style="font-size:12px"><span class="color-333 bold-font">违规下架：</span>商品存在违规信息，需要编辑后提交审核才可上架。</p>
              <p style="font-size:12px"><span class="color-333 bold-font">已审核：</span>商品可随时进行上架处理。</p>
              <p style="font-size:12px"><span class="color-333 bold-font">未提审：</span>商品编辑信息后需要提交审核。</p>
            </div>
            <span slot="reference">状态</span>
          </el-popover>
        </template>
        <template slot-scope="scope">
          <el-tag :type="scope.row.status == 1 ? 'success' : scope.row.status == 3 ? 'warning' : 'danger'">
            {{ scope.row.status == 1 ? "已上架" : scope.row.status == 3 ? "申请下架" : scope.row.status == 4 ? "申请下架拒绝" : scope.row.status == 2 ? "商家下架" : "违规下架" }}
          </el-tag>
          <el-tag v-if="activeTab == 2" style="margin-left:10px" :type="scope.row.ischeck == 4 ? 'success' : 'danger'">
            {{ scope.row.ischeck_name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="activeTab==1" align="center" prop="activity_title" label="参与活动" width="170">
        <template slot-scope="scope">
          <span>{{scope.row.activity_title===null?'未参与活动':scope.row.activity_title}}</span>
        </template>
      </el-table-column>
      <template v-if="activeTab == 3">
        <el-table-column align="center" prop="status_name" label="审核后商品状态" width="175" />
        <el-table-column align="center" label="审核状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.check_status == 1 ? '' : 'danger'">{{ scope.row.check_status_name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="check_type_name" label="审核类型" width="100" />
      </template>
      <el-table-column v-if="activeTab != 1" align="center" label="原因">
        <template slot-scope="scope">
          <p>{{ scope.row.check_reason || "" }}</p>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="300">
        <template slot-scope="scope">
          <el-button v-if="$hasMethod('#add') && activeTab != 1" size="mini" type="primary" @click="editGoods(scope.row.id)">编辑</el-button>
          <el-button v-if="$hasMethod('#submit') && ((activeTab == 2 && scope.row.check_status == 2 && scope.row.check_type == 2) || (activeTab == 3 && scope.row.check_type == 2 && scope.row.status == 4))" type="primary" size="mini" @click="submitAudit(scope.row.id)">重新提交</el-button>
          <el-button v-if="$hasMethod('#enable') && activeTab != 3 && (scope.row.status == 2 || scope.row.status == 5) && scope.row.ischeck == 4" type="warning" size="mini" @click="changeStatus(scope.row.id, scope.row.status, scope.row.activity && scope.row.activity.length > 0)">上架</el-button>
          <el-button v-if="$hasMethod('#enable') && activeTab != 3 && scope.row.status == 1" type="warning" size="mini" @click="changeStatus(scope.row.id, scope.row.status, scope.row.activity && scope.row.activity.length > 0)">下架</el-button>
          <el-button v-if="$hasMethod('#audit') && activeTab == 2 && scope.row.ischeck != 4" type="warning" size="mini" @click="submitAudit(scope.row.id)">提交审核</el-button>
          <el-button v-if="$hasMethod('#view')" type="primary" size="mini" @click="view(scope.row.id)">查看</el-button>
          <el-button v-if="$hasMethod('#delete') && activeTab == 2" type="danger" size="mini" @click="removeItem(scope.row.id)">删除</el-button>
          <el-button v-if="activeTab == 1" type="success" size="mini" @click="setActivity(scope.row.id,scope.row)">设置活动</el-button>
          <el-button v-if="$hasMethod('#cancel') && activeTab == 3 && (scope.row.ischeck == 3 || scope.row.status == 3)" type="danger" size="mini" @click="cancelAudit(scope.row.id, scope.row.check_type)">取消</el-button>
          <el-button v-if="activeTab == 1" type="text" @click="share(scope.row.id)">分享链接</el-button>
        </template>
      </el-table-column>
    </el-table>
    <custom-page ref="customPage" :total="total" @getList="getList" />
    <stock-dialog ref="stockDialog" @getList="getList" />
    <share-dialog ref="shareDialog" />
    <set-dialog ref="setDialog" :act-goods-id="actGoodsId" :act-goods="actGoods" />
  </div>
</template>

<script>
import customPage from '@/components/customPage'
import stockDialog from '../components/stock'
import shareDialog from '../components/share'
import myDatePicker from '@/components/myDatePicker'
import setDialog from '../components/setDialog'
import { getGoodsList, getShopCategory, goodsGrounding, itemDownShelf, deleteGoods, goodsSubmitReview, goodsCancelReview,activityList, activityAdd } from '@/api/goods'
export default {
  // props: ['activeTab', 'tabCount'],
  components: { customPage, stockDialog, shareDialog, myDatePicker, setDialog },
  props: {
    activeTab: {
      type: String,
      default: ''
    },
    tabCount: {
      type: String,
      default: () => ({})
    }
  },
  data() {
    return {
      searchForm: {
        goods_name: '',
        cate_id: null,
        rent_type: null,
        create_time: '',
        check_type: '',
        check_status: ''
      },
      total: 0,
      tableData: [],
      categoryList: [],
      activityList: [],
      actGoodsId:'',
      actGoods:{}
    }
  },
  watch: {
    activeTab(val) {
      // 切换tab，重新获取列表
      this.$refs.customPage.page = 1
      this.reset()
    }
  },
  mounted() {
    this.getSelectList()
    this.getList()
  },
  methods: {
    // 设置活动
    setActivity(id,row) {
      this.actGoodsId=id
      this.actGoods=row
      this.$refs.setDialog.dialogVisible = true
    },
    editGoods(draftId) {
      // console.log(draftId)
      this.$router.push({ name: 'goodsAdd', params: { draftId }})
    },
    view(goodsId) {
      this.$router.push({ name: 'goodsView', params: { goodsId }})
    },
    // 分享
    share(id) {
      this.$refs.shareDialog.goodsId = id
      this.$refs.shareDialog.dialogVisible = true
    },
    // 审核取消
    cancelAudit(id, type) {
      let tip = ''
      let title = ''
      if (type === 1) {
        tip = '取消商品审核后，审核中的商品将保存到商品草稿箱，确认要取消商品审核吗？'
        title = '取消商品审核'
      } else {
        tip = '取消下架审核后，将撤回下架审核申请，确认要取消商品审核吗？'
        title = '取消下架审核'
      }
      this.$confirm(tip, title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        goodsCancelReview(id).then(res => {
          this.getList(true)
        })
      }).catch(() => { })
    },
    // 提交审核
    submitAudit(id) {
      this.$confirm('该商品未提审，确定提交审核？', '提交审核', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        if (this.activeTab === 3) {
          itemDownShelf(id).then(res => {
            this.getList(true)
          })
        } else {
          goodsSubmitReview(id).then(res => {
            this.getList(true)
          })
        }
      })
    },
    handleCommand(command, goodsId) {
      if (command === 1) {
        this.$router.push({ name: 'goodsBaseEdit', params: { goodsId }})
      } else {
        this.$router.push({ name: 'goodsMealInfo', params: { goodsId }})
      }
    },
    // 更改库存
    editStock(id) {
      this.$refs.stockDialog.editId = id
      this.$refs.stockDialog.dialogVisible = true
    },
    // 上架/下架
    changeStatus(id, status, flag) {
      let tip = ''
      let title = ''
      if (status === 1 && flag) {
        tip = '该商品参与平台推荐活动，下架需通过平台审核。您确定要下架商品吗？'
        title = '下架'
      } if (status === 1) {
        tip = '您确定要下架商品吗？'
        title = '下架'
      } else {
        tip = '您确定要上架商品吗？'
        title = '上架'
      }
      this.$confirm(tip, title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        if (status === 1) {
          itemDownShelf(id).then(res => {
            this.getList(true)
          })
        } else {
          goodsGrounding(id).then(res => {
            this.getList(true)
          })
        }
      }).catch(() => { })
    },
    // 删除
    removeItem(id) {
      this.$confirm('您确定要删除吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        deleteGoods(id).then(res => {
          this.getList(true)
        })
      }).catch(() => { })
    },
    // 查询
    search() {
      if (this.activeTab !== 3) {
        const pickerVal = this.$refs.myDatePicker.getVal()
        if (pickerVal !== 'error') {
          this.searchForm.create_time = pickerVal
          this.$refs.customPage.page = 1
          this.getList()
        }
      } else {
        this.$refs.customPage.page = 1
        this.getList()
      }
    },
    // 重置
    reset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset()
      }
      this.searchForm = {
        goods_name: '',
        cate_id: null,
        rent_type: null,
        create_time: '',
        check_type: '',
        check_status: ''
      }
      this.getList()
    },
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage
      if (!flag) {
        this.tableData = []
      }
      getGoodsList({
        page,
        pageSize,
        ...this.searchForm,
        goods_status: this.activeTab
      }).then(res => {
        this.tableData = res.data || []
        this.total = res.total
        for (const key in this.tabCount) {
          this.tabCount[key] = res.count[key]
        }
      })
    },
    getSelectList() {
      getShopCategory().then(res => {
        this.categoryList = res || []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.goods_info {
  .info {
    margin-left: 10px;

    p {
      color: #666666;
    }

    p:first-child {
      color: #999999;
    }
  }
}

.activity {
  line-height: 24px;

  span {
    width: 20px;
    height: 20px;
    margin-left: 10px;
  }
}
</style>
